<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>监测数据</title>
    <link rel="stylesheet" href="../../common/style/common.css">
    <link rel="stylesheet" href="../css/monitor.css">
    <link rel="stylesheet" href="../../common/lib/popup/popup.css">
    <link rel="stylesheet" href="../../common/lib/jquery/paginator/paginator.css">
    <script src="../../common/lib/jquery/jquery.min.js"></script>
    <script src="../../common/lib/jquery/paginator/jq-paginator.min.js"></script>
    <script src="../../common/lib/echarts/echarts.common.min.js"></script>
    <script src="../../common/lib/layui/laydate/laydate.js"></script>
    <script src="../../common/lib/layui/layer/layer.js"></script>
    <script src="../../common/lib/popup/popup.js"></script>
    <script src="../../common/js/common.js"></script>
</head>
<body>
<div class="head">
    <div style="width: 100%;height: 10px"></div>
    <select class="img-select" id="dataType">
        <option value="2">小时数据</option>
        <option selected value="1">分钟数据</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;
    <input class="calendar" type="text" id="startTime">&nbsp;&nbsp;至&nbsp;&nbsp;<input class="calendar" type="text" id="endTime">&nbsp;&nbsp;
    <select class="img-select" id="alarmFlag">
        <option selected value="-1">所有</option>
        <option value="0">正常</option>
        <option value="1">超标</option>
        <option value="2">异常</option>
    </select>&nbsp;&nbsp;
    <button class="searchInputBtn" id="search">搜索</button>
</div>
<div class="center">
    <table id="monitorTable" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <th>报警时间</th>
            <th>排口排放量（升/秒）</th>
            <th>PH值</th>
            <th>总铬（毫克/升）</th>
            <th>总镍（毫克/升）</th>
        </tr>
    </table>
    <table id="monitorTableGas" cellspacing="0" cellpadding="0" align="center" style="display: none">
        <tr>
            <th>报警时间</th>
            <th>VOC（PPM）</th>
            <th>甲苯（PPM）</th>
        </tr>
    </table>
</div>
<div class="footer">
    <span>每页显示&nbsp;&nbsp;</span>
    <select class="img-select" id="pageSize">
        <option selected value="20">20</option>
        <option value="10">10</option>
        <option value="5">5</option>
    </select>&nbsp;&nbsp;
    <ul id="pageTool" class="pagination">
        <li class="prev" jp-role="prev" jp-data="5"><a href="javascript:void(0);"></a></li>
        <li class="page active" jp-role="page" jp-data="6"><a href="javascript:void(0);"></a></li>
        <li class="next" jp-role="next" jp-data="7"><a href="javascript:void(0);"></a></li>
    </ul>
    <input type="image" src="../../common/images/legend1.png" height="20px">
</div>

<!--弹窗-->
<div id="goodcover" style="display: none;"></div>
<div id="code" >
    <div class="popup-title">
        <span style="font-size: 22px">数据详情信息</span>
        <a href="javascript:void(0)" id="closebt">
            <span class="jqclose" >x</span>
        </a>
    </div>
    <div class="goodtxt">
        <div id="info" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="infoMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">污水排放量</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="infoCollectTime" colspan="3" style="width: 75%"></td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td colspan="3" style="width: 75%">升/秒</td>
                </tr>
                <tr>
                    <td style="width: 25%">平均瞬时排放量</td>
                    <td id="infoAvg" colspan="3" style="width: 75%"></td>
                </tr>
                <tr>
                    <td style="width: 25%">最大瞬时排放量</td>
                    <td id="infoMax" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">最小瞬时排放量</td>
                    <td id="infoMin" class="tableTdItem" style="width: 25%"></td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td class="tableTdItem" colspan="3" style="width: 75%">吨</td>
                </tr>
                <tr>
                    <td style="width: 25%">累计排放量</td>
                    <td id="infoCou" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正排放量</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
            </table>
        </div>
        <div id="phInfo" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="phMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">PH值</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="phCollectTime" colspan="3" style="width: 75%">2019-01-05 15:00</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">最大浓度</td>
                    <td id="phMax" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">最小浓度</td>
                    <td id="phMin" class="tableTdItem" style="width: 25%"></td>
                </tr>
                <tr>
                    <td style="width: 25%">平均浓度</td>
                    <td id="phAvg" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">修正浓度</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
                <tr>
                    <td style="width: 25%">超标上下限</td>
                    <td id="phAlarmLimit" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">异常上限</td>
                    <td id="phNormalLimit" class="tableTdItem" style="width: 25%"></td>
                </tr>
            </table>
        </div>
        <div id="CrInfo" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="crMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">总铬</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="crCollectTime" colspan="3" style="width: 75%"></td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">浓度单位</td>
                    <td colspan="3" style="width: 75%">毫克/升</td>
                </tr>
                <tr>
                    <td style="width: 25%">最大浓度</td>
                    <td id="crMax" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">最小浓度</td>
                    <td id="crMin" class="tableTdItem" style="width: 25%"></td>
                </tr>
                <tr>
                    <td style="width: 25%">平均浓度</td>
                    <td id="crAvg" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">修正浓度</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
                <tr>
                    <td style="width: 25%">超标上下限</td>
                    <td id="crAlarmLimit" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">异常上下限</td>
                    <td id="crNormalLimit" class="tableTdItem" style="width: 25%">0</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td class="tableTdItem" colspan="3" style="width: 75%">千克</td>
                </tr>
                <tr>
                    <td style="width: 25%">累计排放量</td>
                    <td id="crCou" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正排放量</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
            </table>
        </div>
        <div id="NiInfo" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="niMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">总镍</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="niCollectTime" colspan="3" style="width: 75%">2019-01-05 15:00</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">浓度单位</td>
                    <td colspan="3" style="width: 75%">毫克/升</td>
                </tr>
                <tr>
                    <td style="width: 25%">最大浓度</td>
                    <td id="niMax" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">最小浓度</td>
                    <td id="niMin" class="tableTdItem" style="width: 25%"></td>
                </tr>
                <tr>
                    <td style="width: 25%">平均浓度</td>
                    <td id="niAvg" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正浓度</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
                <tr>
                    <td style="width: 25%">超标上下限</td>
                    <td id="niAlarmLimit" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">异常上下限</td>
                    <td id="niNormalLimit" class="tableTdItem" style="width: 25%">0</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td class="tableTdItem" colspan="3" style="width: 75%">千克</td>
                </tr>
                <tr>
                    <td style="width: 25%">累计排放量</td>
                    <td id="niCou" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正排放量</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
            </table>
        </div>
        <div id="VocInfo" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="vocMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">VOC</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="vocCollectTime" colspan="3" style="width: 75%"></td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">浓度单位</td>
                    <td colspan="3" style="width: 75%">PPM</td>
                </tr>
                <tr>
                    <td style="width: 25%">超标上下限</td>
                    <td id="vocAlarmLimit" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">异常上下限</td>
                    <td id="vocNormalLimit" class="tableTdItem" style="width: 25%">0</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td class="tableTdItem" colspan="3" style="width: 75%">PPM</td>
                </tr>
                <tr>
                    <td style="width: 25%">实时排放量</td>
                    <td id="vocRtd" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正排放量</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
            </table>
        </div>
        <div id="TolueneInfo" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="tolueneMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">甲苯</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="tolueneCollectTime" colspan="3" style="width: 75%"></td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">浓度单位</td>
                    <td colspan="3" style="width: 75%">PPM</td>
                </tr>
                <tr>
                    <td style="width: 25%">超标上下限</td>
                    <td id="tolueneAlarmLimit" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">异常上下限</td>
                    <td id="tolueneNormalLimit" class="tableTdItem" style="width: 25%">0</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td class="tableTdItem" colspan="3" style="width: 75%">PPM</td>
                </tr>
                <tr>
                    <td style="width: 25%">实时排放量</td>
                    <td id="tolueneRtd" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正排放量</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script src="../js/data.js"></script>
<script src="../../common/js/WaterPollutionController.js"></script>
<script src="../../common/js/GasPollutionController.js"></script>
<script src="../js/monitor.js"></script>
</body>
</html>
